<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>""</title>
    <script src="../libs/system.js"></script>
    <script>
        System.import('../libs/cc.js');
    </script>

    <script src="../src/v1/camera.js"></script>
    <script src="../src/debugUtils.js"></script>
    <script src="../src/graphics.js"></script>
    <script src="../src/v1/rendererV1.js"></script>
</head>
<body>
<canvas id="game"></canvas>
</body>
<script>

    let canvas,ctx;
    const DevWidth = 320;
    const DevHeight = 240;
    const DevScale = 2;
    let imageData;
    let offCtx,offCanvas;

    //-------------------------------
    // demo
    let camera,renderer;

    let mesh;

    window.onload = function () {

        console.log('--------------------------------');
        for(let k in cc.geometry){
            console.log(k);
        }
        console.log('----------end cocos key----------------------');

        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');
        canvas.width = canvas.clientWidth = DevWidth * DevScale;
        canvas.height = canvas.clientHeight = DevHeight * DevScale;
        canvas.style.background = '#000';

        init();
        loop();
    };

    function init() {
        initOffCanvas();
        graphics.init(imageData);

        ctx.scale(DevScale,DevScale);

        //-------------------------------
        // game init start
        // init camera
        camera  = new Camera();
        camera.lookAt(cc.v3(0,1,5),cc.v3(),cc.Vec3.UNIT_Y);

        const fov = 60 * Math.PI / 180;
        const aspect = DevWidth / DevHeight;
        camera.project(fov,aspect,0.1,1000);

        // init renderer
        renderer = new RendererV1(camera);

        // init mesh
        mesh = {
            vertexs:[
                cc.v3(0,1,0),
                cc.v3(0,0,-1),
                cc.v3(-1,0,0),
                cc.v3(1,0,1)
            ],
            faces:[
                cc.v3(0,1,2),
                cc.v3(0,2,3),
                cc.v3(0,3,1),
                cc.v3(2,3,1)
            ],

            worldMat:cc.mat4(),

            // for render
            lstLines:[],
            transVertexs:[],
            mvpMat:cc.mat4(),

            speed:cc.v3(0.01,0,0),

            draw(camera){
                // update worldMat
                // cc.Mat4.translate(this.worldMat,this.worldMat,this.speed);
                cc.Mat4.transform(this.worldMat,this.worldMat,this.speed);

                let pvMat = camera._pvMat;
                cc.Mat4.multiply(this.mvpMat,pvMat,this.worldMat);

                this.transVertexs.length = this.vertexs.length;
                this.vertexs.forEach((vertex,idx)=>{
                    let t3 = cc.v3();
                    cc.Vec3.transformMat4(t3,vertex,this.mvpMat);
                    this.transVertexs[idx] = viewport(t3);
                });

                // 绘制
                let faces = this.faces;
                let vertexs = this.transVertexs;
                for(let i = 0,len = faces.length; i < len; ++i){
                    let face = faces[i];

                    // viewport变换
                    let v0 = vertexs[face.x];
                    let v1 = vertexs[face.y];
                    let v2 = vertexs[face.z];

                    graphics.drawLine(~~v0.x,~~v0.y,~~v1.x,~~v1.y,cc.Color.RED);
                    graphics.drawLine(~~v1.x,~~v1.y,~~v2.x,~~v2.y,cc.Color.RED);
                    graphics.drawLine(~~v2.x,~~v2.y,~~v0.x,~~v0.y,cc.Color.RED);
                }
            }
        };


        renderer.add(mesh);
    }

    function viewport(p) {
        let v = cc.v3();
        v.x = (p.x + 1) * (DevWidth - 1) / 2;
        v.y = (p.y + 1) * (DevHeight - 1) / 2;
        v.z = p.z;
        return v;
    }

    function loop(){

        // logic

        //----------------------------------
        // render
        renderer.render();


        //
        offCtx.putImageData(imageData,0,0);

        // swapbuffer
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(offCanvas,0,0);

        requestAnimationFrame(loop);
    }

    function initOffCanvas() {
        offCanvas = document.createElement('canvas');
        offCanvas.width = offCanvas.clientWidth = DevWidth;
        offCanvas.height = offCanvas.clientHeight = DevHeight;
        offCtx = offCanvas.getContext('2d');

        imageData = ctx.createImageData(DevWidth,DevHeight);
    }
</script>
</html>
